<!--  -->
<template>
  <div class="header-top">
    <div class="header-title">
        <img class="header-title-icon" src="../assets/img/RoundedRectangle3copy2.png" alt="">
        <span class="header-title-text">{{title}}</span>
    </div>
    <div class="header-login">
        <!-- <img class="avatar" src="../assets/img/tx.jpg" alt=""> -->
        <!-- <span class="username">张三</span> -->
        <img class="signout" src="../assets/img/SignOut.png" @click="toLogout" alt="">
    </div>
  </div>
</template>

<script>
export default {
    props:{
        title:String
    },
    components: {},

    computed: {},

    methods: {
        toLogout () {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要退出?',
                onOk: () => {
                    sessionStorage.setItem('token', '')
                    this.$router.push('/login')
                    this.$Message.success('退出成功!');
                },
                onCancel: () => {}
            })
        }
    },
}

</script>
<style lang='stylus' scoped>
.header-top
    height 109px
    color #fff
    font-size 28px
    display flex
    justify-content space-between
    align-items center
    .header-title
        display flex
        align-items center
        .header-title-icon
            margin-left 10px
            margin-right 20px
            height 25px
            width 30px
    .header-login
        display flex
        align-items center
        justify-items flex-end
        margin-right 10px
        .avatar
            height 61px
            width 61px
            border-radius 50%
            margin-right 10px
        .username
            font-size 17px
        .signout
            height 23px
            width 27px
            margin-left 20px
</style>